<template>
  <div class="index">
    <!-- 头部 -->
    <div class="header">
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <!-- <div class="search" @click="$router.push({ name: 'Search' })"> -->
      <div class="search">
        <van-icon name="search" />
        <span>搜索商品</span>
      </div>
      <!-- <div class="user" @click="$router.push({ path: `/personal/${id}` })"> -->
      <div class="user" @click="jump">
        <van-icon name="manager-o" />
      </div>
    </div>

    <!-- tab栏 -->
    <van-tabs v-model="active" sticky swipeable>
      <!-- 列表栏目组件 -->
      <van-tab :title="cate.name" v-for="cate in catelist" :key="cate.id">
        <!-- 列表刷新组件 -->
        <!-- 因为改造过数据，所以这里的loading、finished值是cate里面的loading、finished值 -->
        <van-list
          v-model="cate.loading"
          :finished="cate.finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
          offset="5"
        >
          <!-- 下拉刷新组件 -->
          <van-pull-refresh v-model="cate.isLoading" @refresh="onRefresh">
            <!-- 调用新闻栏目组件 -->
            <!-- 因为我们已经改造过数据，articleList是栏目列表中的一个数据，所以遍历cate.articleList就可以 -->
            <articleBlock
              v-for="post in cate.articleList"
              :key="post.id"
              :post="post"
            ></articleBlock>
          </van-pull-refresh>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getCateList } from "@/apis/category";
import articleBlock from "@/components/articleBlock";
import { getPostList } from "@/apis/post";
export default {
  data() {
    return {
      active: localStorage.getItem("mytoken") ? 1 : 0,
      catelist: [],
      // 定义一个数组接收调用api方法后获取到的数据
      // articleList: [],
    };
  },
  components: {
    // 注册组件
    articleBlock,
  },
  async mounted() {
    // 点击栏目+号跳转
    // 伪元素没有dom元素，所以不能获取，但是可以通过他的父元素来获取
    document.querySelector(".van-sticky").onclick = (e) => {
      // e.target.className就是点击元素时的元素类名，如果有子元素的，就会点击到子元素本身，像伪元素的就可以获取到到他父元素的类名，所以可以通过这个类名来进行点击操作
      console.log(e.target.className);
      // 伪元素的父级类名是van-sticky，所以通过判断是否等于这个类名就可以进行跳转操作
      if (e.target.className.indexOf("van-sticky") != -1) {
        this.$router.push({ name: "cateManager" });
      }
    };

    // 1、先在本地存储中获取catelist，需要JSON.parse转换数据类型
    this.catelist = JSON.parse(localStorage.getItem("categoryList") || "[]");
    // 如果本次存储中没有数据，就发送请求
    if (this.catelist.length == 0) {
      let res = await getCateList();
      this.catelist = res.data.data;
    } else {
      //如果有请求
      if (localStorage.getItem("mytoken")) {
        this.catelist.unshift(
          { id: 0, is_top: 1, name: "关注" },
          { id: 999, is_top: 1, name: "头条" }
        );
      } else {
        this.catelist.unshift({ id: 999, is_top: 1, name: "头条" });
      }
    }

    // console.log(res.data.data);

    // 改造数据，因为现在的数据不是我们想要的
    // 改造需求：1、在获取到的栏目列表中添加一个空数组代替 我们自己在data中定义的 articleList
    // article存放的是每次请求得到的新闻数据，但是有一个缺点，就是每次切换一个栏目，都要发送一次请求，并且要重新刷新列表，每个栏目之间都应该是互不干扰的，所以我们需要加工一下数据
    // 加工数据：让获取到的栏目列表数据（数组）里的每个对象加一个articleList数组，也就是说在原有的数据上加一个数组，用来存放不同栏目的新闻数据
    // 好处：每次切换栏目的时候都不用发送请求，并且每个栏目之间都互不干扰

    // 加工数据：使用map方法
    this.catelist = this.catelist.map((v) => {
      return {
        ...v,
        articleList: [], //为当前栏目添加用于存储这个栏目的新闻数据的数组
        pageIndex: 1, // 当前栏目的当前页码
        pageSize: 10, //当前栏目的每页所显示的新闻数据数量
        loading: false, // 当前组件的上拉加载的状态
        finished: false, //当前组件的数据是否全部加载完毕的标记
        isLoading: false, //当前组件的下拉刷新的状态，标记是否正在下拉刷新
      };
    });
    console.log(this.catelist);

    // 页面一加载就会出现对应的新闻数据，所以要在mounted钩子函数里面再次调用一次
    this.getpost();
  },
  watch: {
    active() {
      // 因为每加载一次，就会触发一次请求，然而我们已经把数据存到了每个栏目的articleList这个数组中，所以我们需要做判断
      // 如果这个数组的长度>0，那么就代表有数据了，那么我们就不用做加载了
      // 如果数组长度=0，就代表还没加载过，就需要做加载
      if (this.catelist[this.active].articleList.length == 0) {
        this.getpost();
      }
    },
  },
  methods: {
    async getpost() {
      // 获取栏目id，active就相当于获取到的栏目对应的索引值
      // let id = this.catelist[this.active].id;
      // 调用api方法，获取栏目对应的数据
      let current = (
        await getPostList({
          category: this.catelist[this.active].id,
          pageIndex: this.catelist[this.active].pageIndex,
          pageSize: this.catelist[this.active].pageSize,
        })
      ).data.data;

      // 把获取到的数据赋值给 自定义的数据aticleList,用于做页面渲染
      // 下拉加载的时候，每次发送请求之后，都要把数据push进去articleList这个数组中，但要打散之后才加进去，因为默认只会加一条数据进去，我们需要的是每条数据都放进去，所以需要打散
      this.catelist[this.active].articleList.push(...current);
      // console.log(this.articleList);

      // 因为每次拉到底部的时候，会触发load事件并将loading值设置成true，加载完成后，如果不把loading值变成false，会一直加载，所以需要手动设置成false
      // 加进去后，loading的值要变成false
      this.catelist[this.active].loading = false;

      // 加载完成后，下拉刷新属性变成false
      this.catelist[this.active].isLoading = false;

      // 如果获取到的数据长度<我们自己设置的当前栏目的新闻数据条数,那么就代表加载完毕了,所以需要手动的把finished的值变成true
      if (current.length < this.catelist[this.active].pageSize) {
        this.catelist[this.active].finished = true;
      }
    },
    // 上拉加载处理函数
    onLoad() {
      // 加载的时候，把页码加1，就会拉到下一页
      this.catelist[this.active].pageIndex++;
      setTimeout(() => {
        // 调用发送请求函数，重新发送请求，pageIndex增加1之后的请求
        this.getpost();
      }, 500);
    },
    // 下拉刷新处理函数
    onRefresh() {
      // 把页数重置为第一页
      this.catelist[this.active].pageIndex = 1;
      // 清空存放新闻数据的数组
      this.catelist[this.active].articleList.length = 0;
      // 因为下拉加载的时候，finished的值是true，就是不能下拉更多了，但是我们如果再次上拉刷新，往下看的时候，下面就会显示没有更多的内容了，所以需要手动把finished的值更改成false
      this.catelist[this.active].finished = false;
      // 发送请求
      this.getpost();
    },
    jump() {
      // 获取用户的id，在登录页面存储了一个id，我们从本地内存中拿就可以了
      let id = JSON.parse(localStorage.getItem("userId"));
      if (id) {
        this.$router.push({ path: `/personal/${id}` });
      } else {
        this.$toast.fail("未登录，请登录！");
        this.$router.push({ path: `/login` });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 50px;
  background-color: #ff0000;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  .iconnew {
    font-size: 65px;
  }
  .user {
    font-size: 25px;
  }
  .search {
    flex: 1;
    padding: 10px 0;
    margin: 0 10px;
    background-color: #ff6666;
    border-radius: 20px;
    text-align: center;
    span {
      margin-left: 10px;
    }
    /deep/.van-icon {
      vertical-align: bottom;
    }
  }
}
/deep/ .van-sticky {
  padding-right: 50px;
  &::after {
    content: "+";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 44px;
    background-color: #fff;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    line-height: 35px;
  }
}
</style>